<template>
  <div :class="['MenDianDetailsPage',showOrHideCls]">
    <div class="view">
      <div class="btnDiv">
        <span >您的当前位置：</span>
        <span class="sp2" @click="btnClick(0)">首页 > </span>
        <span class="sp2" @click="btnClick(1)"> 门店列表 > </span>
        <span class="sp3">门店详情</span>
      </div>
      <div class="conDiv">
        <div class="title">{{srsdata.data.title}}</div>
        <div v-html="decodeURIComponent(srsdata.data.contents)" class="txt"></div>
        <div v-if="srsdata.data.txt!=null" class="detai" v-html="decodeURIComponent(srsdata.data.txt)"></div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.MenDianDetailsPage{
  position: relative;
}

.view{
  font-size: 16px;margin: auto;
  max-width: 1200px;min-width: 1200px;

}
.view div{
  position: relative;
}
.btnDiv{
  color: #3F393B;text-align: left;padding: 30px;
}
.btnDiv .sp2{
  cursor: pointer;
}
.btnDiv .sp3{
  color: #84AE4C;
}
.conDiv{
  font-size: 24px;color: #3E3A39;line-height: 30px;
  padding-bottom: 50px;
}
.conDiv .title{
  font-family: Alimama DongFangDaKai;font-weight: 400;font-size: 50px;color: #0B4727;line-height: 60px;
}
.conDiv .txt{
  word-wrap: break-word; /* 旧版浏览器支持 */
  overflow-wrap: break-word;
}
.conDiv .detai{
  padding-top:50px;text-align: left;font-size: 14px;line-height: 22px;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import {useRoute} from "vue-router";
import Enum from "@/js/Enum";


let store = useStore();
let routerData = useRoute();
let srsdata=reactive({data:{channelId:0,
    contents:'',
    ctime:0,
    id:Enum.no_num,
    imgUrl:'',
    orderNum:0,
    subChannelId:0,
    threeChannelId:0,
    txt:'',
    title:''}});

let hhh='<p>&emsp;&emsp;&emsp;&emsp;山葵说始于2023年，作为一个有“独特思维”的自主品牌，自创立以来就一直专注“创新、融合年轻”的概念，在追求品质、口味、态度的前提下，突破传统韩式烤肉方法，结合日式饮食习惯进行融合改良，不断开发出一系列随心、随性、随意的烤肉新吃法。\n' +
    '</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;面对消费者的多种口味选择，自目前市场上以“山葵+烤肉”形式为主打出品的品牌较少，山葵说以创新“山葵烤肉”概念出发，融合各国饮食特色，不断沉淀、突破、创新，带来全新的味蕾享受满足不同顾客的选择与需求。</p>'


onMounted(() => {
  console.log("MenDianDetailsPage onMounted 初始化 门店二级页面详情页",routerData.query.id);
  getDataFun(routerData.query.id);
  window.scrollTo(0, 0);
});


onBeforeUnmount(() => {
  console.log('MenDianDetailsPage onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  store.state.mendImgBanner.id=Enum.no_num;
  console.log("MenDianDetailsPage onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');



let btnClick=(type)=>{
  console.log("MenDianListPage btnClick 0:首页,1:列表页",type);

  if(type===1){
    store.state.mendDPages.url=Enum.mendfc_list;
    store.state.mendDPages.data={}
    store.state.mendDPages.status++;
  }
  if(type===0){
    store.commit('updatePages',Enum.startPath);
  }
}

let getDataFun=()=>{
  store.state.mendImgBanner.id=routerData.query.id;
  if(store.state.mendianData==null)return;
    for(let i=0;i<store.state.mendianData[0].dataList.length;i++){

      if(routerData.query.id==store.state.mendianData[0].dataList[i].id){
        srsdata.data=store.state.mendianData[0].dataList[i];
        return;
      }
    }
  for(let i=0;i<store.state.mendianData[1].dataList.length;i++){
    if(routerData.query.id==store.state.mendianData[1].dataList[i].id){
      srsdata.data=store.state.mendianData[1].dataList[i];
      return;
    }
  }
}
let is_datastaue=false;
let datastaue=computed(()=>{return store.state.mendianData;});
watch(datastaue,(newValue,oldValue)=>{
  if(is_datastaue)return;
  is_datastaue=true;
  getDataFun();
});
</script>
